<span [class.value]="!disabled" [class.changed]="default.min !== value.min || default.max !== value.max" (wheel)="onWheel($event)"
    (mouseup)="onMouseUp($event)">
    <ng-container *ngIf="value.min === undefined && value.max === undefined">
        <span>#</span>
    </ng-container>
    <ng-container *ngIf="value.min !== undefined || value.max !== undefined">
        <span class="min" *ngIf="default.min !== value.min || default.max !== value.max" (wheel)="onWheelMin($event)"
            (mouseup)="onMouseUpMin($event)">{{value.min === undefined ? '#' : (value.min | number : '1.0-1')}}</span>
        <span *ngIf="default.min !== value.min || default.max !== value.max">~</span>
        <span *ngIf="default.min === value.min && default.max === value.max">{{value.text}}</span>
        <span class="max" *ngIf="default.min !== value.min || default.max !== value.max" (wheel)="onWheelMax($event)"
            (mouseup)="onMouseUpMax($event)">{{value.max === undefined ? '#' : (value.max | number : '1.0-1')}}</span>
    </ng-container>
</span>